import React, { Component } from 'react'
import './Cate.less';
import Header from '../../components/Header/Header'
import { SideBar } from 'antd-mobile'
import { reqgetcate, reqgetgoods } from '../../http/api'
import { $pre } from '../../http/http';
export default class Cate extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cateList: [],
      fid: '',
      goodsList: [],
    }
  }
  componentDidMount() {
    this.getCateList();
  }
  async getCateList() {
    let { data: res } = await reqgetcate();
    if (res.code === 200) {
      let arr = res.list ? res.list : [];
      let fid = arr[0].id
      this.setState({
        cateList: arr,
        fid
      }, () => {
        this.getGoodsList(this.state.fid);
      })
    }
  }
  async getGoodsList() {
    let { data: res } = await reqgetgoods({ fid: this.state.fid });
    if (res.code === 200) {
      let arr = res.list ? res.list : []
      this.setState({
        goodsList: arr,
      })
    }
  }
  render() {
    let { cateList, fid, goodsList } = this.state;
    return (
      <div className='cate'>
        <Header back title='分类'></Header>
        <div className="box">
          <div className="sidebar">
            <SideBar onChange={(k) => {
              this.setState({
                fid: k - 0,
              }, () => {
                this.getGoodsList();
              })
            }} activeKey={fid + ''}>
              {cateList.length>0 ? cateList.map(item => (
                <SideBar.Item key={item.id} title={item.catename} />
              )) : (<div>暂无数据</div>)}
            </SideBar>
          </div>
          <div className="list">
            {goodsList.length>0 ? goodsList.map(item => (<div className="item" key={item.id}>
              <img src={$pre + item.img} alt="" />
              <div className="right">
                <h3>商品名称：{item.goodsname}</h3>
                <div>价格：{item.price}</div>
              </div>
            </div>)) : (<div>暂无数据</div>)}
          </div>
        </div>
      </div>
    )
  }
}
